import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import { connect } from "react-redux";
import { actionsCreators } from "./store";
import { actions } from "../../pages/login/store";
import { Link } from "react-router-dom";
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchINfoTitle,
  SearchINfoSwitch,
  SearchINfoItem,
  SearchInfoList
} from "./style";

class Header extends Component {
  getListArea = () => {
    const {
      page,
      list,
      mouseEnter,
      mouseLeave,
      moserIn,
      focused,
      changePage,
      totalPage
    } = this.props;
    const newList = list.toJS();
    let pageList = [];
    if (newList.length) {
      for (let i = (page - 1) * 10; i < page * 10; i++) {
        pageList.push(
          <SearchINfoItem key={newList[i]}>{newList[i]}</SearchINfoItem>
        );
      }
    }

    if (focused || moserIn) {
      return (
        <SearchInfo onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
          <SearchINfoTitle>
            热门搜索
            <SearchINfoSwitch
              onClick={() => changePage(page, totalPage, this.spinIcon)}
            >
              <i
                ref={icon => {
                  this.spinIcon = icon;
                }}
                className="iconfont spin"
              >
                &#xe606;
              </i>
              换一批
            </SearchINfoSwitch>
          </SearchINfoTitle>
          <SearchInfoList>{pageList}</SearchInfoList>
        </SearchInfo>
      );
    } else {
      return null;
    }
  };
  render() {
    const { list, login, logOut } = this.props;
    return (
      <HeaderWrapper>
        <Link to="/">
          <Logo></Logo>
        </Link>
        <Nav>
          <Link to="/">
            <NavItem className="left active">首页</NavItem>
          </Link>
          <NavItem className="left">下载App</NavItem>
          {login ? (
            <NavItem className="right" onClick={logOut}>
              退出
            </NavItem>
          ) : (
            <Link to="/login">
              <NavItem className="right">登录</NavItem>
            </Link>
          )}
          <NavItem className="right">
            <i className="iconfont">&#xe607;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              timeout={300}
              in={this.props.focused}
              classNames="slide"
            >
              <NavSearch
                onFocus={() => this.props.inputFocus(list)}
                onBlur={this.props.inputBlur}
                className={this.props.focused ? "focuse" : ""}
              ></NavSearch>
            </CSSTransition>
            <i
              className={
                this.props.focused ? "focuse iconfont zoom" : "iconfont zoom"
              }
            >
              &#xe623;
            </i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Link to='/write'>
          <Button className="writting">
            <i className="iconfont">&#xe605;</i>写文章
          </Button>
          </Link>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    );
  }
}

const mapStateToProps = state => ({
  focused: state.getIn(["header", "focused"]),
  list: state.getIn(["header", "list"]),
  page: state.getIn(["header", "page"]),
  moserIn: state.getIn(["header", "moserIn"]),
  totalPage: state.getIn(["header", "totalPage"]),
  login: state.getIn(["login", "login"])

  // state.get('header').get('focused')
});
const mapDispathToProps = dispath => {
  return {
    inputFocus(list) {
      if (list.size === 0) {
        dispath(actionsCreators.getList());
      }
      dispath(actionsCreators.searchFocus());
    },
    inputBlur() {
      dispath(actionsCreators.searchBlur());
    },
    mouseEnter() {
      dispath(actionsCreators.onMouseEnter());
    },
    mouseLeave() {
      dispath(actionsCreators.onMouseLeave());
    },
    changePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/gi, "");
      if (originAngle) {
        originAngle = parseInt(originAngle, 10);
      } else {
        originAngle = 0;
      }
      spin.style.transform = "rotate(" + (originAngle + 360) + "deg)";

      if (page < totalPage) {
        dispath(actionsCreators.onChangePage(page + 1));
      } else {
        dispath(actionsCreators.onChangePage(1));
      }
    },
    logOut() {
      dispath(actions.logOuts())
    }
  };
};

export default connect(mapStateToProps, mapDispathToProps)(Header);
